<template>
  <div>
     <h3>商品数据</h3>
     {{ $store.state.goods.goodsList }} - {{ goodsList }}
     <p>totalNum: {{totalNum}}</p>
     <hr>
     <h3>购物车数据</h3>
     {{ $store.state.car.carList }} - {{ carList }}
     <p>totalPrice: {{totalPrice}}</p>
  </div>
</template>

<script>
import {mapState, mapGetters} from 'vuex'
export default {
    name:'App',
    computed:{
        // 方式一：
        // 将goods切片中的 goodsList state状态，映射为计算属性 goodsList
        ...mapState('goods',['goodsList']),
        // 方式二：对象
        // ...mapState('goods', {
        //     goodsList:'goodsList'
        // })

        ...mapGetters('goods',['totalNum']),
        ...mapState('car',['carList']),
        ...mapGetters('car', ['totalPrice'])
        
    }
}
</script>

<style>

</style>